<template>
  <div>
    <a-card>
      <!-- GetAlarmTriggerList -->
      <a-button type="primary" @click="showModal"> <PlusOutlined style="color: #ffff" />新建</a-button>
      <a-modal
        v-model:visible="isModalVisible"
        :title="modalTitle"
        @ok="handleOk(formState)"
        @visibleChange="handleModalVisibleChange"
        style="width: 850px"
      >
        <a-form :model="formState" :rules="rules" :label-col="labelCol" ref="formRef" :wrapper-col="wrapperCol">
          <a-form-item ref="name" label="触发器名称" name="TriggerName">
            <a-input v-model:value="formState.TriggerName" placeholder="请输入触发器名称"/>
          </a-form-item>
          <a-row>
            <a-col :span="8">
              <a-form-item label="设备类型" name="TriggerDeviceType">
                <a-select v-model:value="formState.TriggerDeviceType" placeholder="请选择设备类型" @change="fetchDeviceModels">
                  <a-select-option v-for="item in deviceTypelist" :key="item.type" :value="item.type">{{ item.dec }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="设备模型" name="TriggerDeviceModelUuid" style="margin-left: 10px">
                <a-select v-model:value="formState.TriggerDeviceModelUuid" placeholder="请选择设备模型" @change="ChangeDevicemodel">
                  <a-select-option v-for="item in deviceModels" :key="item.uuid" :value="item.uuid">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="模型数据" name="TriggerModelDataUuid" style="margin-left: 10px">
                <a-select v-model:value="formState.TriggerModelDataUuid" placeholder="请选择模型数据">
                  <a-select-option v-for="item in DevicemodeList" :key="item.name" :value="item.uuid">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="触发条件" name="TriggerCondition">
                <a-select v-model:value="formState.TriggerCondition" placeholder="请选择触发条件">
                  <a-select-option v-for="item in TriggerConditionList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="X数值" name="TriggerXValue" style="margin-left: 10px">
                <a-input v-model:value="formState.TriggerXValue" placeholder="请输入X数值" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="保持时间(毫秒)" name="TriggerKeepTime">
            <a-input v-model:value="formState.TriggerKeepTime" placeholder="请输入时间秒数" />
          </a-form-item>
          <a-form-item label="报警" name="checked3">
            <a-switch v-model:checked="formState.checked3">
              <template #checkedChildren><check-outlined /></template>
              <template #unCheckedChildren><close-outlined /></template>
            </a-switch>
          </a-form-item>
          <div v-if="formState.checked3">
            <a-form-item label="告警等级" name="TriggerAlarmLevel" style="margin-top: 5px">
              <a-select v-model:value="formState.TriggerAlarmLevel" placeholder="请选择告警等级">
                <a-select-option :value="1">提示</a-select-option>
                <a-select-option :value="2">次要</a-select-option>
                <a-select-option :value="3">重要</a-select-option>
                <a-select-option :value="4">紧急</a-select-option>
                <a-select-option :value="5">致命</a-select-option>
              </a-select>
            </a-form-item>
            <a-row>
              <a-col :span="12">
                <a-form-item label="报警推送内容" name="TriggerAlarmShowText">
                  <a-textarea v-model:value="formState.TriggerAlarmShowText" placeholder="请输入报警推送内容" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="恢复推送内容" style="margin-left: 10px">
                  <a-textarea v-model:value="formState.TriggerAlarmHideText" placeholder="请输入恢复推送内容" />
                </a-form-item>
              </a-col>
            </a-row>
          </div>

          <a-form-item label="联动数据" name="Triggertype">
            <a-switch v-model:checked="formState.Triggertype">
              <template #checkedChildren><check-outlined /></template>
              <template #unCheckedChildren><close-outlined /></template>
            </a-switch>
          </a-form-item>
          <div v-if="formState.Triggertype">
            <a-form-item label="联动模型数据" name="TriggerLinkModelDataUuid">
              <a-select v-model:value="formState.TriggerLinkModelDataUuid" placeholder="联动模型数据">
                <a-select-option v-for="item in DevicemodeList" :key="item.name" :value="item.uuid">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="联动告警下发数据值" name="TriggerLinkageAlarmValue">
              <a-input v-model:value="formState.TriggerLinkageAlarmValue" placeholder="请输入联动告警下发数据值" />
            </a-form-item>

            <a-form-item label="联动告警清楚下发数据值" name="TriggerLinkageAlarmClearValue">
              <a-input v-model:value="formState.TriggerLinkageAlarmClearValue" placeholder="请输入联动告警清楚下发数据值" />
            </a-form-item>
          </div>
        </a-form>
      </a-modal>
      <a-button style="margin-left: 10px" @click="Refresh"> <UndoOutlined />刷新</a-button>
      <a-table :dataSource="dataSource" bordered :columns="columns2" style="margin-top: 10px">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'TriggerType'">
            <div v-if="text == 1">联动</div>
            <div v-if="text == 2">警告</div>
            <div v-if="text == 3">联动警告</div>
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="handleEdit(record)"><FormOutlined style="color: #ffff" />详情</a-button>
            <a-popconfirm
              title="删除"
              ok-text="确认"
              cancel-text="取消"
              description="你确定要删除吗?"
              @confirm="handleDelete(record)"
              @cancel="cancel"
            >
              <a-button type="link" danger> <DeleteOutlined style="color: red" />删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>
<script setup>
  import { ref, onMounted, reactive } from 'vue';
  import { message } from 'ant-design-vue';
  import { ModelTriggerApi } from '/@/api/system/ModelTrigger.js';

  const formState = reactive({
    Triggertype: false, //开关
    checked: false,
    TriggerName: '', //触发器名称
    TriggerDeviceModelUuid: '', //模型数据
    TriggerCondition: '', //触发条件
    TriggerXValue: '', //x数值
    TriggerKeepTime: '', //保持时间秒数
    TriggerAlarmLevel: '', //等级告警
    TriggerAlarmShowText: '', //报警推送内容
    TriggerAlarmHideText: '', //恢复推送内容
    TriggerLinkModelDataUuid: '', //联动模型数据
    TriggerLinkageAlarmValue: '', //联动告警下发数据值
    TriggerLinkageAlarmClearValue: '', //联动告警清楚下发数据值
    TriggerModelDataUuid: '',
    TriggerDeviceType: '', //设备类型
  });

  const TriggerConditionList = ref([
    {
      label: '数值大于X',
      value: '>',
    },
    {
      label: '数值大于等于X',
      value: '≥',
    },
    {
      label: '数值小于X',
      value: '<',
    },
    {
      label: '数值小于等于X',
      value: '≤',
    },
    {
      label: '数值等于X',
      value: '=',
    },
    {
      label: '数值不等于X',
      value: '≠',
    },
    {
      label: '数值大于X且小于Y(包含等于)',
      value: '&&',
    },
    {
      label: '数值小于X或大于Y(包含等于)',
      value: '||',
    },
  ]);
  const modalTitle = ref('添加触发器');

  //   列表数据
  async function ModelTriggerList() {
    try {
      const res = await ModelTriggerApi.GetAlarmTriggerList();
      dataSource.value = res.list;
    } catch (error) {
      console.error('出错', error);
    }
  }
  // 设备类型
  const deviceTypelist = ref([]);
  const selectedDeviceType = ref('');
  const deviceTypeModels = async () => {
    const res = await ModelTriggerApi.supportDevice();
    if (res && res.list) {
      deviceTypelist.value = res.list;
    }
  };
  // 设备模型数据下拉
  const deviceModels = ref([]);
  const deviceModelsType = ref('');
  const fetchDeviceModels = async (val) => {
    deviceModelsType.value = val;
    const params = { type: val };
    try {
      const res = await ModelTriggerApi.snmpmodellist(params);
      if (res && res.list) {
        deviceModels.value = res.list;
      }
    } catch (error) {
      console.error('出错', error);
    }
  };
  //   设备模型下拉
  const DevicemodeList = ref([]);
  const ChangeDevicemodel = async (val) => {
    console.log(val);
    const params = {
      type: deviceModelsType.value,
      muid: val,
    };
    try {
      const res = await ModelTriggerApi.snmpmodelgetmibs(params);
      if (res && res.mibs) {
        DevicemodeList.value = res.mibs;
      }
    } catch (error) {
      console.error('出错', error);
    }
  };

  // 表格数据
const dataSource = ref([]);
const formRef = ref(null);
  // 表格列配置
  const columns2 = ref([
    {
      title: '触发器名称',
      dataIndex: 'TriggerName',
      key: 'TriggerName',
    },
    {
      title: '触发器类型',
      dataIndex: 'TriggerType',
      key: 'TriggerType',
    },
    {
      title: '触发条件',
      dataIndex: 'TriggerCondition',
      key: 'TriggerCondition',
    },
    {
      title: '跟新条件',
      dataIndex: 'CreatedAt',
      key: 'CreatedAt',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
    },
  ]);
  const rules = {
    TriggerName: [
      {
        required: true,
        message: '请填写触发器名称',
        trigger: 'change',
      },
    ],
    Triggertype: [
      {
        required: true,
        message: '选择触发器类型',
        trigger: 'change',
      },
    ],
    TriggerDeviceModelUuid: [
      {
        required: true,
        message: '选择模型数据',
        trigger: 'change',
      },
    ],
    TriggerXValue: [
      {
        required: true,
        message: '请选择X数值',
        trigger: 'change',
      },
    ],
    TriggerCondition: [
      {
        required: true,
        message: '请选择触发条件',
        trigger: 'change',
      },
    ],
    TriggerKeepTime: [
      {
        required: true,
        message: '请输入时间秒数',
        trigger: 'change',
      },
    ],
    TriggerAlarmLevel: [
      {
        required: true,
        message: '请输入告警等级',
        trigger: 'change',
      },
    ],
    checked3: [
        { required: true, message: '请选择是否启用报警' }
      ],
    TriggerAlarmShowText: [
      {
        required: true,
        message: '请输入报警推送内容',
        trigger: 'change',
      },
    ],
    TriggerAlarmHideText: [
      {
        required: true,
        message: '请输入恢复推送内容',
        trigger: 'change',
      },
    ],
    TriggerLinkModelDataUuid: [
      {
        required: true,
        message: '请输入联动模型数据',
        trigger: 'change',
      },
    ],
    TriggerLinkageAlarmValue: [
      {
        required: true,
        message: '请输入联动告警下发数据值',
        trigger: 'change',
      },
    ],
  };
  const isModalVisible = ref(false);
  // 新建弹框
  const showModal = () => {
    modalTitle.value = '添加触发器';
      formState.TriggerName='',
      formState.Triggertype= null,
      formState.TriggerDeviceModelUuid= null,
      formState.TriggerCondition= '',
      formState.TriggerXValue= '',
      formState.TriggerKeepTime= null,
      formState.TriggerAlarmLevel= null,
      formState.TriggerAlarmShowText= '',
      formState.TriggerAlarmHideText= '',
      formState.TriggerLinkModelDataUuid= null,
      formState.TriggerLinkageAlarmValue= '',
      formState.TriggerLinkageAlarmClearValue= '',
      formState.TriggerModelDataUuid= null,
      formState.TriggerDeviceType= null,
   
    isModalVisible.value = true;
    deviceTypeModels();
  };
  //  点击确认
  const handleOk = async (formState) => {
    try {
    // 触发表单验证
    await formRef.value.validate();
    
    // 如果校验通过，进行触发器的处理逻辑
    let triggerTypeValue = 0;
    if (formState.checked3 && formState.Triggertype) {
      triggerTypeValue = 3;
    } else if (formState.checked3) {
      triggerTypeValue = 2;
    } else if (formState.Triggertype) {
      triggerTypeValue = 1;
    }
    const triggerTime = Number(formState.TriggerKeepTime);
    const params = {
      TriggerName: formState.TriggerName, //触发器名称
      Triggertype: triggerTypeValue, //设备类型
      TriggerDeviceModelUuid: formState.TriggerDeviceModelUuid, //模型数据
      TriggerCondition: formState.TriggerCondition, //触发条件
      TriggerXValue: formState.TriggerXValue, //x数值
      TriggerKeepTime: triggerTime, //保持时间秒数
      TriggerAlarmLevel: formState.TriggerAlarmLevel, //等级告警
      TriggerAlarmShowText: formState.TriggerAlarmShowText, //报警推送内容
      TriggerAlarmHideText: formState.TriggerAlarmHideText, //恢复推送内容
      TriggerLinkModelDataUuid: formState.TriggerLinkModelDataUuid, //联动模型数据
      TriggerLinkageAlarmValue: formState.TriggerLinkageAlarmValue, //联动告警下发数据值
      TriggerLinkageAlarmClearValue: formState.TriggerLinkageAlarmClearValue, //联动告警清楚下发数据值
      TriggerModelDataUuid: formState.TriggerModelDataUuid,
      TriggerDeviceType: formState.TriggerDeviceType,
    };
    
    // 提交表单数据
    const res = await ModelTriggerApi.AlarmTriggerAdd(params);
    message.success('新建成功');
    ModelTriggerList();
    isModalVisible.value = false;
  } catch (error) {
    // 如果校验失败
    console.error('表单验证失败', error);
    message.error('请填写所有必填项');
  }
  };
  //   删除
  async function handleDelete(record) {
    const prams = {
      ID: record.ID,
      name: record.TriggerName,
    };
    try {
      const res = await ModelTriggerApi.AlarmTriggerDel(prams);
      message.success('删除成功');
      ModelTriggerList();
    } catch (error) {
      console.error('删除失败', error);
    }
  }
  // 刷新按钮
  const Refresh = () => {
    ModelTriggerList();
  };
  // 详情回显
  async function handleEdit(record) {
    modalTitle.value = '详情'; // 编辑时的标题
    formState.value = { ...record }; // 填充表单数据
    deviceTypeModels();
    // console.log(record);
    formState.TriggerName = record.TriggerName;
    formState.TriggerCondition = record.TriggerCondition;
    formState.TriggerXValue = record.TriggerXValue;
    formState.TriggerKeepTime = record.TriggerKeepTime;
    formState.TriggerDeviceType = record.TriggerDeviceType;
    formState.TriggerDeviceModelUuid = record.TriggerDeviceModelUuid;
    formState.TriggerModelDataUuid = record.TriggerModelDataUuid;
    formState.TriggerAlarmLevel = record.TriggerAlarmLevel;
    formState.TriggerAlarmShowText = record.TriggerAlarmShowText;
    formState.TriggerAlarmHideText = record.TriggerAlarmHideText;
    formState.Triggertype = record.Triggertype;
    formState.TriggerLinkModelDataUuid = record.TriggerLinkModelDataUuid;
    formState.TriggerLinkageAlarmValue = record.TriggerLinkageAlarmValue;
    formState.TriggerLinkageAlarmClearValue = record.TriggerLinkageAlarmClearValue;
    deviceModelsType.value = record.TriggerDeviceType;
    fetchDeviceModels(record.TriggerDeviceType);
    ChangeDevicemodel(record.TriggerDeviceModelUuid);
    isModalVisible.value = true;
  }
  // 模态框可见性变化时的处理
  const handleModalVisibleChange = (visible) => {
    isModalVisible.value = visible;
  };
  onMounted(() => {
    ModelTriggerList();
  });
</script>
